<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grid Test</title>
<!-- css -->
<link href="../../style/fdui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body{font-size: 12px}
</style>
<!-- lib -->
<script type="text/javascript" src="../../src/FDLib/FDLib.js"></script>
<script type="text/javascript" src="../../src/JsMap.js"></script>
<style type="text/css">
.bg-color{
	background-color:#fff200;
}
</style>
<script type="text/javascript">
FDLib.setImportOption({appDir:'../../src/'}).importJS(['FDGrid']);
var grid;
var grid2;
var gridData = {total:12,pageIndex:1,pageSize:10,gridMsg:'你好'
	,rows:[
	       {"username":'Jim',"addr":"浙江","birthday":"1978-12-26",age:10}
	       ,{"username":'Tom3',"addr":"北京","birthday":"1988-1-26",age:20}
	       ,{"username":'Tom4',"addr":"天津","birthday":"1994-2-16",age:30}
	       ,{"username":'Tom5',"addr":"重庆","birthday":"1983-3-22",age:40}
	       ,{"username":'Tom6',"addr":"河南","birthday":"1982-4-26",age:50}
	       ,{"username":'Tom7',"addr":"新疆","birthday":"1988-5-21",age:60}
	       ,{"username":'Andrew',"addr":"辽宁","birthday":"1988-6-26",age:70}
	       ,{"username":'Luies',"addr":"广东","birthday":"1984-7-23",age:30}
	       ,{"username":'Louf',"addr":"广西","birthday":"1985-8-24",age:40}
	       ,{"username":'Mars',"addr":"青海","birthday":"1986-9-26",age:50}
	       ,{"username":'Tom7',"addr":"甘肃","birthday":"1987-10-25",age:60}
	       ,{"username":'Tom7',"addr":"陕西","birthday":"1988-7-26",age:70}
	     ]};
	     
window.onload = function(){
	
	
	grid = new FDGrid({
		domId:'grid'
		//,url:'data.json'
		//,width:'200px'
		,height:'200px'
		,data:gridData
		,selectOption:{isSingleSelect:true,onclick:selectHandler}
		,rowRender:function(rowData,tr,rowIndex){
			// 如果是第三行,则改变背景颜色
			// 年龄加10
			if(rowIndex + 1 == 3) {
				tr.style.backgroundColor = "#CCC";
				rowData.age = rowData.age + 10;
			}
		}
		,columns:[
			{text:"姓名",name:"username"}
			,{text:"联系地址",name:"addr"}
			,{text:"出生日期",name:"birthday"}
			,{text:"联系地址",name:"addr"}
			,{text:"出生日期",name:"birthday"}
			,{text:"联系地址",name:"addr"}
			,{text:"出生日期",name:"birthday"}
			,{text:"联系地址",name:"addr"}
			,{text:"出生日期",name:"birthday"}
			,{text:"联系地址",name:"addr"}
			,{text:"出生日期",name:"birthday"}
			,{text:"年龄(靠右对齐)",name:"age",render:function(rowData,td,rowIndex){
				var style = '';
				// 如果年龄>= 70,则背景色变红
				if(rowData.age >= 70) {
					style = 'style="color:red;"';
				}
				if(rowData.age <= 20) {
					style = 'style="color:green;"';
				}
				var ret = '<div '+style+'>'+rowData.age+'</div>';
				td.align = 'right';
				return ret;
			}}
		]
		,actionButtons:[
			{text:'修改',onclick:update}
			,{text:'删除',onclick:del,showFun:function(rowData,rowIndex){
				// 如果是3的倍数就显示删除按钮
				return ((rowIndex+1) % 3 === 0)
			}}
		]
	});
	
	grid.search();
	
	grid2 = new FDGrid({
		domId:'grid2'
		//,url:'data.json'
		//,width:'200px'
		,height:'200px'
		,data:gridData
		,selectOption:{isMultiSelect:true,onclick:selectHandler2}
		,rowRender:function(rowData,tr,rowIndex){
			// 如果是第三行,则改变背景颜色
			// 年龄加10
			if(rowIndex + 1 == 3) {
				tr.style.backgroundColor = "#CCC";
				rowData.age = rowData.age + 10;
			}
		}
		,columns:[
			{text:"姓名",name:"username"}
			,{text:"联系地址",name:"addr",style:{'textAlign':'center'}}
			,{text:"出生日期",name:"birthday"}
			,{text:"年龄(靠右对齐)",name:"age",render:function(rowData,td,rowIndex){
				// 如果年龄>= 70,则背景色变红
				if(rowData.age >= 70) {
					td.style.backgroundColor = "red";
				}
				if(rowData.age <= 20) {
					td.style.color = "green";
				}
				td.align = 'right';
				return rowData.age;
			}}
		]
		,actionButtons:[
			{text:'修改',onclick:update}
			,{text:'删除',onclick:del,showFun:function(rowData,rowIndex){
				// 如果是3的倍数就显示删除按钮
				return ((rowIndex+1) % 3 === 0)
			}}
		]
	});
	
	grid2.search()
}
function selectHandler(rowData,rowIndex,tr,selectDom) {
	FDLib.getEl('username').value = rowData.username;
	FDLib.getEl('addr').value = rowData.addr;
	FDLib.getEl('birth').value = rowData.birthday;
	
}
function selectHandler2(rowData,rowIndex,tr,selectDom) {
	FDLib.getEl('msg').innerHTML +=rowData.addr + " ";
}
function update(rowData,rowIndex) {
	alert(rowIndex + " update: " + rowData.username);
}
function del(rowData,rowIndex) {
	alert(rowIndex + " del: " + rowData.username);
}
function refresh() {
	grid.refresh();
}
function setSelected() {
	grid2.setSelected(2);
}
function setNoSelected() {
	grid2.setNoSelected(2);
}
function clearSelected() {
	grid2.clearSelected();
}
function selectAll() {
	grid2.selectAll();
}
function setRowDisabled() {
	grid2.setRowDisabled(2);
	grid2.setRowDisabled(3);
	grid2.setRowDisabled(4);
}
function setRowEnabled() {
	grid2.setRowEnabled(2);
	grid2.setRowEnabled(3);
	grid2.setRowEnabled(4);
}
function getSelectedLine() {
	var data = grid.getSelectedLine();
	console.log(data)
}
function getSelectedRows() {
	var datas = grid2.getSelectedRows();
	console.log(datas)
}
</script>
</head>
<body>
<button onclick="getSelectedLine()">getSelectedLine()</button>
<div id="grid"></div>
<table>
	<tr>
		<td>姓名:<input type="text" id="username" /></td>
	</tr>
	<tr>
		<td>出生日期:<input type="text" id="birth" /></td>
	</tr>
	<tr>
		<td>联系地址:<input type="text" id="addr" /></td>
	</tr>
</table>
<br>
<button onclick="setSelected()">setSelected(2)</button>
<button onclick="setNoSelected()">setNoSelected(2)</button>
<button onclick="selectAll()">selectAll()</button>
<button onclick="clearSelected()">clearSelected()</button>
<button onclick="setRowDisabled()">setRowDisabled()</button>
<button onclick="setRowEnabled()">setRowEnabled()</button>
<button onclick="getSelectedRows()">getSelectedRows()</button>
<div id="grid2"></div>
<div id="msg"></div>
</body>
</html>